import React from 'react';
import {NavLink,Routes,Route,Navigate} from "react-router-dom";
import Home from "./pages/Home";
import GoodsList from "./pages/GoodsList";
import NewsList from "./pages/NewsList";
import My from "./pages/My";
import "./App.css";
import Cart from "./pages/Cart";
import Collect from "./pages/Collect";

function App(props) {
    return (
        <div className={"container"}>
            <nav>
                <NavLink to={"/"}>首页</NavLink>
                <NavLink to={"/goodsList"}>商品列表</NavLink>
                <NavLink to={"/newsList"}>新闻列表</NavLink>
                <NavLink to={"/my"}>个人中心</NavLink>
            </nav>
            <Routes>
                {/*http://localhost:3000/my/collect*/}
                <Route path={"/"} element={<Home></Home>}></Route>
                <Route path={"/newsList"} element={<NewsList></NewsList>}></Route>
                <Route path={"/goodsList"} element={<GoodsList></GoodsList>}></Route>
                <Route path={"/my"} element={<My></My>}>
                    {/*完整写法*/}
                    {/*<Route path={"/my/cart"} element={<Cart/>}></Route>*/}
                    {/*<Route path={"/my/collect"} element={<Collect/>}></Route>*/}


                    {/*如果省略前缀，默认是相对的是父级/my*/}
                    {/*<Route path={"/my"} element={<Navigate to={"cart"}/>}></Route>*/}
                    {/*index属性代表默认使用哪一个子路由*/}
                    <Route index element={<Navigate to={"cart"}/>}></Route>
                    <Route path={"cart"} element={<Cart/>}></Route>
                    <Route path={"collect"} element={<Collect/>}></Route>
                </Route>
            </Routes>

        </div>
    );
}

export default App;